<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Layout Enhance</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .container {
            background: white;
            border-radius: 10px;
            padding: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        h1 {
            color: #667eea;
            border-bottom: 3px solid #667eea;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }
        h2 {
            color: #764ba2;
            margin-top: 30px;
        }
        .feature {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 15px 20px;
            margin: 20px 0;
            border-radius: 5px;
        }
        .feature h3 {
            margin-top: 0;
            color: #667eea;
        }
        .feature-icon {
            font-size: 32px;
            margin-right: 10px;
        }
        ul {
            list-style: none;
            padding-left: 0;
        }
        ul li:before {
            content: "✓ ";
            color: #28a745;
            font-weight: bold;
            margin-right: 10px;
        }
        .cta {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 30px;
            border-radius: 5px;
            text-align: center;
            margin: 30px 0;
            font-size: 18px;
            font-weight: bold;
        }
        .screenshot {
            background: #f0f0f0;
            border: 2px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
            text-align: center;
            color: #666;
        }
        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 Web Layout Enhance</h1>
        
        <p style="font-size: 18px; color: #666;">
            为 Odoo 18 提供增强的 Web 界面布局功能，提升用户体验和工作效率。
        </p>

        <div class="cta">
            现代化的界面 • 灵活的配置 • 高效的工作流程
        </div>

        <h2>核心功能</h2>

        <div class="feature">
            <h3><span class="feature-icon">📋</span>左侧边栏菜单</h3>
            <ul>
                <li>菜单显示在左侧边栏，释放更多水平空间</li>
                <li>支持无限层级的菜单展开和折叠</li>
                <li>实时搜索功能，快速定位目标菜单</li>
                <li>美观的深色主题设计</li>
                <li>平滑的动画效果</li>
            </ul>
        </div>

        <div class="screenshot">
            <p>📸 左侧边栏菜单预览</p>
            <p>（深色主题 • 多级展开 • 搜索功能）</p>
        </div>

        <div class="feature">
            <h3><span class="feature-icon">📑</span>多标签页模式</h3>
            <ul>
                <li>同时打开多个页面，类似浏览器的多标签页</li>
                <li>快速在不同页面间切换</li>
                <li>每个标签页都有关闭按钮</li>
                <li>自动去重，避免重复打开相同页面</li>
                <li>标签页栏支持水平滚动</li>
            </ul>
        </div>

        <div class="screenshot">
            <p>📸 多标签页模式预览</p>
            <p>（多页面管理 • 快速切换 • 高效工作流）</p>
        </div>

        <h2>为什么选择此模块？</h2>

        <div class="feature">
            <h3>🎯 提升效率</h3>
            <p>多标签页模式让您可以同时处理多个任务，无需频繁切换菜单。</p>
        </div>

        <div class="feature">
            <h3>🎨 现代化界面</h3>
            <p>左侧边栏菜单提供更现代的界面体验，与主流应用保持一致。</p>
        </div>

        <div class="feature">
            <h3>⚙️ 灵活配置</h3>
            <p>每个用户都可以根据自己的习惯独立配置，无需影响其他用户。</p>
        </div>

        <div class="feature">
            <h3>🚀 易于使用</h3>
            <p>直观的操作方式，无需培训即可快速上手。</p>
        </div>

        <h2>快速开始</h2>

        <ol>
            <li>安装模块</li>
            <li>进入 <code>我的个人信息</code> → <code>偏好设置</code></li>
            <li>配置 <code>Menu Position</code> 和 <code>Enable Multi-Tab Mode</code></li>
            <li>保存并刷新页面（Ctrl+F5）</li>
            <li>开始享受全新的界面体验！</li>
        </ol>

        <h2>兼容性</h2>

        <ul>
            <li>Odoo 版本：18.0</li>
            <li>浏览器：Chrome/Edge 90+, Firefox 88+, Safari 14+</li>
            <li>依赖模块：web, base_setup（核心模块）</li>
        </ul>

        <h2>支持与文档</h2>

        <p>完整的文档和使用指南请查看：</p>
        <ul>
            <li><strong>README.md</strong> - 完整功能介绍和技术文档</li>
            <li><strong>INSTALLATION.md</strong> - 详细安装步骤</li>
            <li><strong>USAGE_GUIDE.md</strong> - 使用指南和最佳实践</li>
        </ul>

        <div class="cta" style="margin-top: 40px;">
            让工作更高效！立即安装体验！
        </div>

        <p style="text-align: center; color: #999; margin-top: 40px;">
            Version 1.0.0 | LGPL-3 License | © 2025 Your Company
        </p>
    </div>
</body>
</html>

